<template>
  <section>
    <div class="banner" @mouseover="fnClearInv" @mouseout="fnRunInv">
      <transition name="slide-trans">
        <img v-if="isShow" class="banner-img" :src="slides[nowIndex].img" />
      </transition>
      <transition name="slide-trans-old">
        <img v-if="!isShow" class="banner-img" :src="slides[nowIndex].img" />
      </transition>
      <!--遮罩-->
      <div class="mask"></div>
      <!--遮罩上的文字-->
      <div class="prompt">
        <div class="title">{{slides[nowIndex].title}}</div>
        <ul>
          <li @click="fnGoTo(prevIndex)">&lt;</li>
          <li :class="nowIndex === index ? 'on' : ''" v-for="(item,index) in slides" @click="fnGoTo(index)">{{index + 1}}</li>
          <li @click="fnGoTo(nextIndex)">&gt;</li>
        </ul>
      </div>
    </div>
  </section>
</template>

<script lang='ts'>
  import Vue from 'vue'
  import  { Component, Prop } from 'vue-property-decorator'

  @Component
  export default class Slide extends Vue {
    @Prop({ type:Array })
    slides
    @Prop({default: 1000})
    inv : number

    //当前banner的ID
    nowIndex : number = 0
    //定时器名称
    invName : number
    //轮播图动画控制
    isShow : boolean = true


    //computed  计算属性
    //上一页
    get prevIndex () {
      if (this.nowIndex == 0) {
        return this.slides.length - 1
      } else {
        return this.nowIndex - 1
      }
    }
    //下一页
    get nextIndex () {
      if (this.nowIndex == this.slides.length - 1) {
        return 0
      } else {
        return this.nowIndex + 1
      }
    }

    //methods
    //跳转到指定页
    fnGoTo(index):void{
      this.isShow = false
      setTimeout(()=>{
        this.isShow = true
        this.nowIndex = index
      },10)
    }

    //定时轮播
    fnRunInv():void{
      this.invName = setInterval(() => {
        this.fnGoTo(this.nextIndex)
      },this.inv)
    }

    //关闭轮播
    fnClearInv():void{
      clearInterval(this.invName)
    }

    //生命周期
    mounted(){
      //启动定时器
      this.fnRunInv()
    }
  }
</script>

<style lang="scss" scoped>
  .banner{
    width: 100%;
    height: 450px;
    z-index:1;
    position: relative;
    overflow: hidden;

    .banner-img {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
    }

    //遮罩
    .mask{
      width: 100%;
      height: 40px;
      line-height: 40px;
      background: #000;
      z-index:2;
      position: absolute;
      left: 0;
      bottom: 0;
      opacity: 0.5;
    }

    //遮罩上的文字
    .prompt{
      width: 100%;
      height: 40px;
      line-height: 40px;
      z-index:3;
      position: absolute;
      left: 0;
      bottom: 0;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      font-size: 15px;
      font-weight: bold;
      letter-spacing: 2px;
      color: #fff;

      .title{
        padding-left: 10px;
      }

      ul {
        display: flex;
        flex-direction: row;
        list-style: none;
        padding-right: 10px;
        cursor: pointer;

        li {
          padding: 0 10px;
        }

        .on {
          text-decoration: underline;
        }
      }
    }
  }

  //轮播图动画
  .slide-trans-enter-active {
    transition: all 2s;
  }
  .slide-trans-enter {
    transform: translateX(101%);
  }
  .slide-trans-old-leave-active {
    transition: all 2s;
    transform: translateX(-101%);
  }
</style>
